<!-- 单位选择组件，单选 -->
<template>
	<van-action-sheet v-model="showCompo" :close-on-click-overlay="false" @closed="closeSheet" title="会签单位"
		cancel-text="确定">
		<view class="tree-container">
			<!-- <input v-model="filterText" placeholder="输入关键字进行过滤" /> -->
			<van-field v-model="filterText" label="" placeholder="输入关键字进行过滤" :clearable="true" />
			<ly-tree :tree-data="treeData" :props="props" ref="tree" node-key="deptId" show-radio checkOnClickNode
				:default-expanded-keys="expandKeys" @check="handleCheck" @radio-change="handleRadioChange"
				@node-click="handleNodeClick" :filter-node-method="filterNode" child-visible-for-filter-node />
		</view>
	</van-action-sheet>
</template>

<script>
	export default {
		props: {
			showOrgtree: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			},
			showOrgtree(val){
				this.showCompo = val
			},
		},
		data() {
			return {
				showCompo:false,//是否显示组件
				expandKeys: ["0"], //默认展开的节点-对应的deptId的值
				props: function() {
					return {
						// 这里的label就可以使用函数进行自定义的渲染了
						// label(data, node) {
						// 	return '节点' + node.data.personName;
						// },
						label: 'deptName', // 指把数据中的‘personName’当做label也就是节点名称
						children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
					}
				},
				filterText: '',
				treeData: [],
				deptName: '', //选中的单位信息
				deptCode: '', //选中的单位信息
			}
		},
		mounted() {
			//从缓存加载单位树
			this.getOrgTree()
		},

		methods: {
			closeSheet() {
				let orgInfo = {
					orgName: this.deptName,
					deptCode: this.deptCode
				}
				this.$emit('closeOrgTreeSheet', orgInfo)
			},
			// 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次)，obj中包含当前选中
			handleCheck(obj) {
				// obj: {
				// 	checkedKeys: [9, 5], // 当前选中节点的id数组
				// 	checkedNodes: [{...}, {...}], // 当前选中节点数组
				// 	data: {...}, // 当前节点的数据
				// 	halfCheckedKeys: [1, 4, 2], // 半选中节点的id数组
				// 	halfCheckedNodes: [{...}, {...}, {...}], // 半选中节点的数组
				// 	node: Node {...} // 当前节点实例
				// }

				// console.log('handleCheck', obj);
			},

			// 只要节点的选中状态改变就触发（包括设置默认选中，点击选中/取消选中），会被触发多次
			handleRadioChange(obj) {
				console.log("obj: " + JSON.stringify(obj));
				if (obj.checked ==
					true) { //{"checked":false,"node":{"time":1629361630143,"id":3459,"text":null,"checked":false,"indeterminate":false,"data":{"deptId":"002001","deptCode":"002001","deptName":"华北管理局","leaderId":"sysadmin","parentId":"002","allParentId":"0,002,002001","deptLevel":1,"sort":36,"deptType":"org","divisionId":"--","telephone":"11","address":"1","zipCode":"1     ","extend1":"华北管理局","extend2":null,"extend3":null,"extend4":null,"extend5":null,"extend6":"002001","extend7":null,"extend8":null,"extend9":null,"extend10":null,"isValid":"1","createUser":"CAAC_SYSTEM","createTime":"2021-07-27T12:30:00.011+0000","updateUser":null,"updateTime":null,"depth":null}}
					console.log(obj.node.data.deptName) //单位名称
					console.log(obj.node.data.deptId) //单位id
					this.deptName = obj.node.data.deptName
					this.deptCode = obj.node.data.deptId
				} else {
					this.deptName = ''
					this.deptCode = ''
				}
				// console.log('handleRadioChange', obj);
			},

			handleNodeClick(obj) {
				// console.log('handleNodeClick', JSON.stringify(obj));
				// console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
			},
			//呈报单位查询
			filterNode(value, data) {
				if (!value) return true;
				return data.deptName.indexOf(value) !== -1;
			},
			getOrgTree() {
				this.treeData = this.cache.get('orgTree')
				// console.log("this.treeData: " + JSON.stringify(this.treeData));
				// uni.getStorage({
				//     key: 'orgTree',
				//     success: function (res) {
				// 		_this.treeData = res.data
				// 		console.log("this.treeData--->: " + JSON.stringify(_this.treeData));
				//     },
				// 	fail: function(e){

				// 	}
				// });
			},
		}
	}
</script>

<style>
	.van-action-sheet {
		z-index: 9999;
		min-height: 80%;
	}
</style>
